<template>
  <view class="content">
    <!-- 音频组件 -->
    <free-audio 
      ref="audio"
      :startPic='startPic' 
      :endPic='endPic' 
      audioId='audio1' 
      :url='path'
      @audio-time-change='handleTimeChange'
    ></free-audio>
    <!-- 可滚动的会话列表区域 -->
    <view class="scroll-container">
      <scroll-view 
        class="conversation-scroll" 
        scroll-y="true"
        :scroll-with-animation="true"
        :scroll-into-view="scrollIntoId"
        ref="scrollView"
      >
        <view class="conversation-list">
          <view 
            v-for="(item, index) in conversationList" 
            :key="index" 
            class="conversation-item"
            :class="{ 'active': activeIndex === index }"
            :id="'item-' + index"
            @click="handleSentenceClick(item, index)"
          >
            <!-- 左侧图标占位 -->
            <view class="icon-placeholder"></view>
            <!-- 文本内容 -->
            <view class="text-content">{{ item.content }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import freeAudio from '../../components/chengpeng-audio/free-audio.vue'
export default {
  components: { freeAudio },
  data() {
    return {
      title: 'Hello',
      path: '../../static/bhmz.mp3',
      startPic: '../../static/play.png',
      endPic: '../../static/stop.png',
      currentTime: 0,
      activeIndex: -1, // 当前激活的句子索引
      conversationList: [
        {
          "channelId": 0,
          "content": "百侯名镇旅游区分为百侯印象、耕读世家、古巷枫韵、虚是旧梦、侯北人家等五个主题片区，",
          "endPosition": 8.8,
          "startPosition": 0.0
        },
        {
          "channelId": 1,
          "content": "以深厚的历史人文底蕴及保存完好的观听式古建筑群为依托，",
          "endPosition": 14.1,
          "startPosition": 9.0
        },
        {
          "channelId": 2,
          "content": "一系列本土文化博览馆、优美的自然生态资源为载体，",
          "endPosition": 19.3,
          "startPosition": 14.3
        },
        {
          "channelId": 3,
          "content": "向世人展示文风鼎盛的千年客家小镇生生不息的生活画卷，",
          "endPosition": 25.2,
          "startPosition": 19.5
        },
        {
          "channelId": 4,
          "content": "打造集古镇观光、历史探寻、文化休闲、科教娱乐、民俗体验等功能于一体的客家古镇文化旅游区。",
          "endPosition": 34.0,
          "startPosition": 25.4
        }
      ],
       scrollTop: 0,
       scrollIntoId: "", // 用于控制滚动到哪个元素
    }
  },
  onUnload() {
    uni.$emit('stop')
  },
  onHide() {
    uni.$emit('stop')
  },
  methods: {
    // 拖拽或点击进度条触发的事件
    handleTimeChange(time) {
      console.log('拖拽或点击进度条时的时间：', time);
      this.currentTime = time;
      // 1. 更新当前高亮的句子
      this.updateActiveSentence();
      // 2. 如果当前时间在某个句子范围内，滚动到该句子
      const activeItem = this.conversationList.find(
        (item) => time >= item.startPosition && time <= item.endPosition
      );
      if (activeItem) {
        const index = this.conversationList.indexOf(activeItem);
        this.scrollToSentence(index);
      }
    },
    // 点击句子触发的事件
    handleSentenceClick(item, index) {
      console.log('当前句子开始时间：', item.startPosition);
      
      // 1. 更新激活状态
      this.activeIndex = index;
      
      // 2. 滚动到当前句子
      this.scrollToSentence(index);
      
      // 3. 跳转并播放音频
      if (this.$refs.audio) {
        // 使用组件提供的方法进行跳转
        const seekSuccess = this.$refs.audio.seek(item.startPosition);
        
        if (seekSuccess) {
          console.log('跳转播放时间成功');
          // 确保音频播放状态正确
          if (!this.$refs.audio.status) {
            this.$refs.audio.start(this.$refs.audio.audioId);
          } else {
            // 如果已经在播放状态，直接播放（seek后会自动继续）
            this.$refs.audio.context.play();
          }
          // 触发父组件时间更新
          this.handleTimeChange(item.startPosition);
        } else {
          console.error('跳转播放时间失败');
        }
      }
    },
    // 更新当前播放的句子高亮
    updateActiveSentence() {
      const activeItem = this.conversationList.find(
        (item) => this.currentTime >= item.startPosition && this.currentTime <= item.endPosition
      );
      if (activeItem) {
        this.activeIndex = this.conversationList.indexOf(activeItem);
      }
    },
    // 滚动到指定句子
    scrollToSentence(index) {
      this.scrollIntoId = "item-" + index; // 设置要滚动的目标 ID
      setTimeout(() => {
        this.scrollIntoId = "";  //重置以运行重复点击同一项
      }, 500);
    },
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

/* 滚动容器样式 */
.scroll-container {
  width: 100%;
  flex: 1; /* 占满剩余空间 */
  margin-top: 30rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

/* 滚动视图样式 */
.conversation-scroll {
  width: 100%;
  height: 400rpx;
}

/* 会话列表样式 */
.conversation-list {
  width: 100%;
  padding: 10rpx 0;
}

/* 每句话的容器 */
.conversation-item {
  display: flex;
  align-items: flex-start;
  margin: 20rpx 0; /* 上下间隔 */
  padding: 15rpx;
  border-radius: 8rpx;
  transition: all 0.3s;
  cursor: pointer;
}

/* 图标占位 */
.icon-placeholder {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
  border-radius: 50%;
  background-color: #eee;
  flex-shrink: 0;
}

/* 文本内容 */
.text-content {
  flex: 1;
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
}

/* 激活状态样式 */
.conversation-item.active {
  background-color: #f0f7ff;
  border-left: 4rpx solid #409eff;
  transform: translateX(5rpx); /* 轻微右移增强选中感 */
}

/* 点击反馈 */
.conversation-item:active {
  opacity: 0.8;
}
</style>